<template>
  <div id="basic-form-con">
    <g-banner :title="'多tab页表单-2'" :des="'多个tab页的表单'"></g-banner>
    <a-affix :target="getScrollingCon">
      <div class="g-title-con">
        <h2 class="g-main-title pull-left">多tab页表单-2</h2>
        <div class="g-title-button pull-right">
          <el-button type="primary">保存</el-button>
          <el-button @click="handleSubmit" type="primary">提交</el-button>
          <el-button>返回</el-button>
        </div>
        <div clearfix></div>
      </div>
    </a-affix>
    <div class="g-box">
      <el-tabs v-model="tabActiveName" class="g-form-tabs-2" @tab-click="handleForward">
        <el-tab-pane label="数据抽取" name="1"></el-tab-pane>
        <el-tab-pane label="数据流开发" name="2"></el-tab-pane>
        <el-tab-pane label="数据接口" name="3"></el-tab-pane>
        <el-tab-pane label="数据直报" name="4"></el-tab-pane>
        <el-tab-pane label="数据爬取" name="5"></el-tab-pane>
        <el-tab-pane label="数据勘察" name="6"></el-tab-pane>
      </el-tabs>
      <router-view ref="rw"></router-view>
    </div>
  </div>
</template>
<script>
import { getScrollingCon } from '@/util/common'
export default {
  data() {
    return {
      tabActiveName: '1',
    }
  },
  watch: {
    '$route.path'() {
      const path = this.$route.matched[2].path
      this.tabActiveName = path.replace(this.$route.matched[1].path+'/', '')
    }
  },
  methods: {
    getScrollingCon,
    handleForward(node) {
      this.$router.push(node.name)
    },
    handleSubmit() {
      try {
        this.$refs.rw.handleSubmit()
      } catch (error) {
        console.error('当前页面没有提交函数')
      }
    }
  },
}
</script>